<template>
    <div class="pertailor">
        <v-touch @swipeleft="swiperleft" @swiperight="swiperright" class="wrapper">
            <van-popup v-model="isPopShow" position="bottom">
                <!-- 开始时间 -->
                <van-datetime-picker
                        @cancel="cancelPicker"
                        @confirm="confirmPicker"
                        v-if="datePicker == 'startTime'"
                        v-model="startTime"
                        type="date"
                        :formatter="formatter"
                        :min-date="currentTime"
                />
                <!-- 结束时间 -->
                <van-datetime-picker
                        @cancel="cancelPicker"
                        @confirm="confirmPicker"
                        v-if="datePicker == 'endTime'"
                        v-model="endTime"
                        type="date"
                        :formatter="formatter"
                        :min-date="startTime"
                />
                <van-area
                        @cancel="cancelPicker"
                        @confirm="confirmPosition"
                        :area-list="areaList"
                        :columns-num="3"
                        :columns-placeholder="['', '', '请选择']"
                        v-if="datePicker == 'position'"
                        title="选择你的出发地址"
                />
            </van-popup>
            <div class="per-head"></div>
            <div class="per-content">
                <div class="per-form">
                    <ul class="per-form-list">
                        <li>
                            <i class="per-icon">&#xe633;</i>
                            <span>制定我的出行计划</span>
                        </li>
                        <li @click="showDatePicker('position')">
                            <span id="curLocation">{{ this.startingPlace }}</span>
                            <i class="per-icon">&#xe60f;</i>
                        </li>
                        <li>
                            <span>目的地</span>
                            <input type="text" placeholder="输入你想去的地方" id="destination">
                        </li>
                        <li>
                            <div>
                                <!-- 按钮区域 -->
                                <span ref="startTime"
                                      @click="showDatePicker('startTime')"
                                      id="startTime">开始时间<br><span>点击选择出发时间</span></span>
                                <span ref="endTime" @click="showDatePicker('endTime')"
                                      id="endTime">返程时间<br><span>点击选择返程时间</span></span>
                                <!-- 弹出层 -->
                            </div>
                        </li>
                        <li>
                            <input type="text" placeholder="设置我喜欢的酒店星级/价格">
                            <i class="per-icon">&#xe60f;</i>
                        </li>
                        <li>
                            <button @click="goTo">
                                生成出行方案
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="per-recommend" @click="changeData()">
                    <div class="preHead">
                        推荐方案
                    </div>
                    <div class="preContent">
                        <div class="per-scheme">
                            <p>三日游</p>
                            <img src="../../assets/per-re1.png" alt="">
                            <p>【四姑娘山】十二月这样玩最嗨皮</p>
                        </div>
                        <div class="per-scheme">
                            <p>二日游</p>
                            <img src="../../assets/per-re2.png" alt="">
                            <p>【稻城亚丁】雪山脚下，是梦境中的绝美风光</p>
                        </div>
                        <div class="per-scheme">
                            <p>一日游</p>
                            <img src="../../assets/qingchengshan.png" alt="">
                            <p>【青城山】这样玩最嗨皮</p>
                        </div>
                        <div class="per-scheme">
                            <p>三日游</p>
                            <img src="../../assets/jzg.png" alt="">
                            <p>【九寨沟】梦境中的绝美风光</p>
                        </div>
                        <div class="per-scheme">
                            <p>三日游</p>
                            <img src="../../assets/em1.png" alt="">
                            <p>【峨眉山】十二月这样玩最嗨皮</p>
                        </div>
                        <div class="per-scheme">
                            <p>二日游</p>
                            <img src="../../assets/per-re2.png" alt="">
                            <p>【稻城亚丁】雪山脚下，是梦境中的绝美风光</p>
                        </div>
                    </div>
                </div>
                <div style="width: 100%;height: 80px;"></div>
            </div>
        </v-touch>
    </div>
</template>

<script>
    import AreaList from "../Mine/ModifiedData/area";
    import "../../http/httpRequestUtil.js";

    export default {
        components: {},
        data() {
            return {
                currentTime: new Date(), // 开始时间不能超过当前时间
                startTime: new Date(), // 开始时间
                endTime: new Date(), // 结束时间
                datePicker: '', // 用于判断哪个选择器的显示与隐藏
                isPopShow: false, // 弹出层隐藏与显示
                getTime: 0,
                areaList: AreaList,    // 指定数据源
                startingPlace: '德阳市',
                target: '',
                setOff: '',
                comeBack: '',
                origin: '德阳市',
                destination: null
            };
        },
        methods: {
            goTo() {
                let userNameLogin = this.$cookies.get('user_name');
                console.log(userNameLogin);
                if (userNameLogin === null) {
                    this.alertSwal("需登陆后才能制定出游路线");
                    this.$router.replace('/login');
                } else {

                    this.$router.push({
                        path: '/travelprogram',
                        query: this.getPathParams()
                    });
                }
            },
            showDatePicker(picker) { //弹出层并显示时间选择器
                this.isPopShow = true;
                this.datePicker = picker;
            },
            cancelPicker() { // 选择器取消按钮点击事件
                this.isPopShow = false;
                this.datePicker = "";
            },
            confirmPosition(e) {//  出发地址确认按钮，确认出发地址并渲染到页面
                let positionText = e;
                let userrigion = null;
                if (positionText[2] != null) {
                    userrigion = positionText[0].name + " " + positionText[1].name + " " + positionText[2].name;
                } else if (positionText[1] != null) {
                    userrigion = positionText[0].name + " " + positionText[1].name;
                } else {
                    userrigion = positionText[0].name;
                }
                console.log(userrigion);
                this.startingPlace = userrigion;
                if (positionText[1] == null) {
                    alert("请精准到市");
                } else {
                    this.isPopShow = false;
                    this.origin = positionText[1].name;
                    console.log(this.target);
                }
            },
            formatDate(value) {
                let date = value;
                let m = date.getMonth() + 1;
                let d = date.getDate();
                if (m >= 1 && m <= 9) {
                    m = "0" + m;
                }
                if (d >= 0 && d <= 9) {
                    d = "0" + d;
                }
                let timer = date.getFullYear() + "-" + m + "-" + d;
                return timer;
            },
            confirmPicker(value) {// 确定按钮，时间格式化并显示在页面上
                let date = value;
                let m = date.getMonth() + 1;
                let d = date.getDate();
                if (m >= 1 && m <= 9) {
                    m = "0" + m;
                }
                if (d >= 0 && d <= 9) {
                    d = "0" + d;
                }
                let timer = date.getFullYear() + "-" + m + "-" + d
                this.$refs[this.datePicker].innerHTML = timer;
                this.isPopShow = false;
                this.datePicker = "";
                this.duration();
                console.log(timer);
            },
            formatter(type, value) {// 格式化选择器日期
                if (type === "year") {
                    return `${value}年`;
                } else if (type === "month") {
                    return `${value}月`;
                }
                return value;
            },
            duration() {
                if (this.startTime != null && this.endTime != null) {
                    console.log(this.startTime);
                    console.log(this.endTime);

                    let time01 = Date.parse(this.startTime);
                    let time02 = Date.parse(this.endTime);

                    let cha = parseInt((time02 - time01) / (24 * 3600 * 1000) + 1);

                    console.log(cha);

                    if (cha < 1) {
                        return;
                    } else {
                        this.getTime = cha;
                    }
                }
            },
            generationPlan() {
                this.setOff = this.formatDate(this.startTime);
                this.comeBack = this.formatDate(this.endTime);
                this.axios.get('/path/generate', {
                    params: {
                        comeBack: this.comeBack,
                        origin: this.origin,
                        setOff: this.setOff,
                        target: this.target
                    }
                })
                    .then((resp) => {
                        console.log(resp);
                    })
                    .catch()
                    .catch()
            },
            createRoute() {
                let curLocation = document.getElementById("curLocation").innerText;
                let destination = document.getElementById("destination").value;
                let startTime = document.getElementById("startTime").innerText;
                let endTime = document.getElementById("endTime").innerText;

                console.log("出发地：" + curLocation + "，目的地：" + destination);
                console.log("开始时间：" + startTime + "，结束时间：" + endTime);
                this.axiosIns.get("/path/generate?timeEnd=" + endTime + "&origin=" + curLocation + "&timeStart=" + startTime + "&description=" + destination).then((res) => {
                    let status = res.data.code;
                    if (status === 200) {
                        console.log(res.data.data[0]);
                    }
                }).catch(function (error) {
                    console.log(error);
                    alert("输入出错，请重新输入！！");
                });
            },
            swiperleft() {
                this.$router.push({'path': '/mine'});
            },
            swiperright() {
                this.$router.push({'path': '/recommend'});
            },
            getPathParams() {
                let curLocation = document.getElementById("curLocation").innerText;
                let destination = document.getElementById("destination").value;
                let startTime = document.getElementById("startTime").innerText;
                let endTime = document.getElementById("endTime").innerText;
                this.destination = destination;
                return {
                    timeStart: startTime,
                    timeEnd: endTime,
                    origin: curLocation,
                    destination: destination
                }
            }
        }
    }
</script>

<style>
    .pertailor .van-overlay {
        margin-top: 0px;
    }

    .wrapper {
        touch-action: pan-y !important;
    }

    .per-icon {
        font-family: iconfont;
        font-style: normal;
    }

    .per-head {
        width: 100%;
        height: 324px;
        background: url("../../assets/zhidingHead.png");
        background-size: 100% 100%;
    }

    .per-content {
        width: 668px;
        height: 100vh;
        position: absolute;
        top: 196px;
        left: 50%;
        transform: translateX(-50%);
    }

    .per-form {
        width: 100%;
        height: 676px;
        background: white;
        border-radius: 30px;
        box-shadow: 1px 10px 10px #eee;
        border: 1px solid #eee;
    }

    .per-form-list {
        width: 100%;
        height: 676px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .per-form-list > li {
        width: 648px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    /*form-title*/
    .per-form-list > li:nth-child(1) {
        height: 106px;
    }

    .per-form-list > li:nth-child(1) > i {
        font-size: 35px;
        color: #e8a41c;
    }

    .per-form-list > li:nth-child(1) > span {
        font-size: 30px;
        margin-left: 10px;
        display: block;
        border-bottom: 4px #ec9b38 solid;
    }

    /*form-出发地点*/
    .per-form-list > li:nth-child(2) {
        width: 648px;
        height: 68px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px #dedede solid;
    }

    .per-form-list > li:nth-child(2) > span {
        font-size: 30px;
        margin-left: 20px;
        color: #333333;
    }

    .per-form-list > li:nth-child(2) > i {
        font-size: 28px;
        margin-right: 8px;
        color: #999999;
    }

    /*form-目的地*/
    .per-form-list > li:nth-child(3) {
        width: 648px;
        height: 100px;
        border-bottom: 1px #dedede solid;
    }

    .per-form-list > li:nth-child(3) > span {
        margin-left: 20px;
        font-size: 30px;
    }

    .per-form-list > li:nth-child(3) > input {
        width: 300px;
        height: 30px;
        border: 0px;
        font-size: 24px;
        margin-left: 20px;
    }

    /*form-时间*/
    .per-form-list > li:nth-child(4) {
        width: 648px;
        height: 120px;
        border-bottom: 1px #dedede solid;
    }

    .per-form-list > li:nth-child(4) > div {
        width: 100%;
        height: 120px;
        display: flex;
        flex-direction: row;
    }

    .per-form-list > li:nth-child(4) > div > span {
        width: 35%;
        height: 120px;
        display: flex;
        font-size: 28px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .per-form-list > li:nth-child(4) > div > span > span {
        font-size: 20px;
        color: #999999;
    }

    .per-form-list > li:nth-child(4) > div > div:nth-child(3) {
        width: 30%;
        height: 120px;
        display: flex;
        padding-left: 10px;
        padding-top: 10px;
        color: #333333;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 30px;
    }

    .van-picker__toolbar {
        height: 60px !important;
    }

    .van-picker__cancel, .van-picker__confirm {
        font-size: 24px !important;
    }

    .van-picker-column__item {
        font-size: 24px;
    }

    /*form-酒店档次*/
    .per-form-list > li:nth-child(5) {
        width: 648px;
        height: 100px;
        justify-content: space-between;
        border-bottom: 1px #dedede solid;
    }

    .per-form-list > li:nth-child(5) > input {
        width: 376px;
        height: 32px;
        margin-left: 20px;
        font-size: 30px;
        border: 0;
    }

    .per-form-list > li:nth-child(5) > i {
        font-size: 28px;
        margin-right: 8px;
        color: #999999;
    }

    /*form-表单提交*/
    .per-form-list > li:nth-child(6) {
        width: 648px;
        height: 178px;
    }

    .per-form-list > li:nth-child(6) > button {
        width: 648px;
        height: 88px;
        background-color: #ec9b38;
        border: 0;
        border-radius: 10px;
        color: white;
    }

    /*...........................................*/
    .per-recommend {
        width: 100%;
        height: auto;
        margin-top: 30px;
    }

    .preHead {
        width: 112px;
        height: 34px;
        font-size: 28px;
        border-bottom: 4px solid #e8a41c;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    .preContent {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .per-scheme {
        width: 330px;
        height: 330px;
        margin-bottom: 20px;
        position: relative;
    }

    .per-scheme > img {
        width: 100%;
        height: 100%;
    }

    .per-scheme > p {
        position: absolute;
        color: white;
    }

    .per-scheme > p:first-of-type {
        top: 0;
        width: 100px;
        height: 36px;
        background: #e8a41c;
        border-bottom-right-radius: 20px;
        border-top-left-radius: 20px;
        text-align: center;
        line-height: 36px;
        font-size: 22px;
    }

    .per-scheme > p:last-of-type {
        bottom: 0;
        font-size: 26px;
    }
</style>
